<template>
  <div @click="$emit('click')" class="car-box" v-if="carInfo">
    <div class="car-img">
      <img
        v-if="status == 'bluecar'"
        src="@/assets/images/ddt/bluecar@1x.png"
        alt=""
      />
      <img
        v-if="status == 'greencar'"
        src="@/assets/images/ddt/greencar@1x.png"
        alt=""
      />
      <img
        v-if="status == 'orangecar'"
        src="@/assets/images/ddt/orangecar@1x.png"
        alt=""
      />
      <img
        v-if="status == 'greycar'"
        src="@/assets/images/ddt/greycar@1x.png"
        alt=""
      />
    </div>
    <div class="car-no">
      <span v-if="status == 'bluecar'" class="bluecar">{{
        carInfo.carLicensePlate
      }}</span>
      <span v-if="status == 'greencar'" class="greencar">{{
        carInfo.carLicensePlate
      }}</span>
      <span v-if="status == 'orangecar'" class="orangecar">{{
        carInfo.carLicensePlate
      }}</span>
      <span v-if="status == 'greycar'" class="greycar">{{
        carInfo.carLicensePlate
      }}</span>
    </div>
  </div>
</template>

<script>
const bluecarImg = require("@/assets/images/ddt/bluecar@1x.png");
const greencarImg = require("@/assets/images/ddt/greencar@1x.png");
const orangecarImg = require("@/assets/images/ddt/orangecar@1x.png");
const greycarImg = require("@/assets/images/ddt/greycar@1x.png");

export default {
  props: {
    carInfo: {
      type: Object,
      default: null,
    },
    status: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      bluecarImg,
      greencarImg,
      orangecarImg,
      greycarImg,
    };
  },
};
</script>



<style lang="scss" scoped>
.car-box {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .car-img {
    width: 25px;
    height: 25px;
  }
  .car-no {
    height: 20px;
    .bluecar {
      border: 1px solid #409eff;
      color: #409eff;
    }
    .greencar {
      border: 1px solid #67c23a;
      color: #67c23a;
    }
    .orangecar {
      border: 1px solid #f79310;
      color: #f79310;
    }
    .greycar {
      border: 1px solid #f46c6c;
      color: #f46c6c;
    }
    span {
      border-radius: 4px;
      font-size: 16px;
    }
  }
}
</style>